<template>
  <div class="index-wrap">
    <Poster />
    <div class="form-wrap">
      <div class="form-title">收件人信息</div>
      <van-form @submit="onSubmit" validate-trigger="onSubmit">
        <van-cell-group inset>
          <van-field
            v-model="formData.name"
            name="name"
            label="姓名"
            placeholder="姓名"
            maxlength="20"
            :clearable="true"
            :rules="[{ required: true, message: '请输入姓名' }]"
          />
          <van-field
            v-model="formData.phone"
            name="phone"
            label="手机号"
            placeholder="手机号"
            type="tel"
            :clearable="true"
            maxlength="11"
            :rules="[
              { validator: phoneValidator, message: '请输入正确的手机号' },
              { validator: phoneRepeatValidator, message: '两次输入的手机号不一致' },
            ]"
          />
          <van-field
            v-model="formData.phoneRepeat"
            name="phoneRepeat"
            label="确认手机号"
            placeholder="手机号"
            type="tel"
            :clearable="true"
            maxlength="11"
            :rules="[
              { validator: phoneValidator, message: '请输入正确的手机号' },
              { validator: phoneRepeatValidator, message: '两次输入的手机号不一致' },
            ]"
          />
          <van-field
            v-model="formData.area"
            name="area"
            label="省市区"
            maxlength="50"
            placeholder="省市区"
            :clearable="true"
            :rules="[{ required: true, message: '请输入省市区' }]"
          />
          <van-field
            v-model="formData.address"
            name="address"
            label="详细地址"
            maxlength="50"
            placeholder="详细地址"
            :clearable="true"
            :rules="[{ required: true, message: '请输入详细地址' }]"
          />
          <van-field
            v-model="formData.remark"
            name="remark"
            label="备注"
            placeholder="请输入备注"
            maxlength="50"
            :clearable="true"
          />
        </van-cell-group>
        <div class="btn-wrap" :class="{ active: isBtnActive }">
          <van-button round block type="primary" native-type="submit"> 提交 </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>
<script>
import Poster from '@/components/Poster.vue';
import { Dialog, Toast } from 'vant';
import { createOrder } from '@/api/index';
import { mapState } from 'vuex';

export default {
  name: 'receiptman',
  computed: {
    ...mapState({
      currentCouponId: (state) => state.currentCouponId,
    }),
  },
  created() {
    if (!this.currentCouponId) {
      this.$router.replace({ path: '/' });
    }
  },
  mounted() {},
  watch: {
    formData: {
      handler() {
        const {
          name, phone, phoneRepeat, area, address,
        } = this.formData;
        if (this.validatePhones() && name && phone && phoneRepeat && area && address) {
          this.isBtnActive = true;
        } else {
          this.isBtnActive = false;
        }
      },
      deep: true,
    },
  },
  components: {
    Poster,
  },
  data() {
    return {
      formData: {
        name: '', // 姓名
        phone: '', // 手机号
        phoneRepeat: '', // 手机号重复验证
        area: '', // 省市区
        address: '', // 详细地址
        remark: '', // 备注
      },
      isBtnActive: false,
    };
  },
  methods: {
    onSubmit(values) {
      console.log('submit', values);
      createOrder({
        couponId: this.currentCouponId,
        receiveName: this.formData.name,
        receivePhone: this.formData.phone,
        receiveAddress: this.formData.area + this.formData.address,
        userRemark: this.formData.remark,
      })
        .then((res) => {
          console.log(res);
          Dialog.alert({
            message: '信息提交成功!',
            theme: 'round-button',
          }).then(() => {
            // 重定向到首页并传值activeNavKey为2
            this.$router.push({ path: '/', query: { activeNavKey: '2' } });
          });
        })
        .catch((err) => {
          console.log(err);
          Toast.fail('请求失败!', JSON.stringify(err));
        });
    },
    phoneValidator(value) {
      return value.length === 11;
    },
    /**
     * 验证手机号和重复手机号
     */
    validatePhones() {
      return this.phoneValidator(this.formData.phone) && this.phoneValidator(this.formData.phoneRepeat) && this.phoneRepeatValidator();
    },
    phoneRepeatValidator() {
      return this.formData.phoneRepeat === this.formData.phone;
    },
  },
};
</script>
<style lang="less" scoped>
.index-wrap {
  position: relative;
  width: 100vw;
  height: 100vh;
  padding-top: 40px;
  .form-wrap::v-deep {
    margin-top: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .form-title {
      font-size: 38px;
      color: #333333;
      font-weight: 500;
      margin-bottom: 60px;
      line-height: 52px;
      position: relative;
      padding: 0 5px;
      &::before {
        display: block;
        width: 100px;
        height: 6px;
        content: '';
        background-image: url('../../assets/image/line-left.png');
        background-size: 100% 100%;
        position: absolute;
        left: -116px;
        top: 23px;
      }
      &::after {
        display: block;
        content: '';
        width: 100px;
        height: 6px;
        background-image: url('../../assets/image/line-right.png');
        background-size: 100% 100%;
        position: absolute;
        right: -116px;
        top: 23px;
      }
    }
    .van-form {
      width: 100%;
      .van-cell-group--inset {
        margin: 0 30px;
        .van-cell {
          background-color: #f8f8f8;
          border-radius: 6px;
          margin-bottom: 30px;
          height: 104px;
          padding: unset;
          display: flex;
          align-items: center;
          padding: 30px 20px;
          .van-cell__title {
            color: #131313;
            font-size: 32px;
            font-weight: 400;
            position: relative;
            width: 140px;
            &::after {
              content: '';
              display: block;
              background-image: url('../../assets/image/line-gap.png');
              background-size: 100% 100%;
              width: 2px;
              height: 44px;
              position: absolute;
              right: 0;
              top: 2px;
            }
          }
          .van-field__clear {
            font-size: 40px;
          }
          .van-field__control {
            font-size: 32px;
            font-weight: 400;
          }
        }
      }
      .van-hairline--top-bottom::after,
      .van-hairline-unset--top-bottom::after {
        display: none;
      }
    }
    .btn-wrap {
      margin: 30px;
      margin-top: 70px;
      .van-button--round {
        border-radius: 6px;
      }
      .van-button--primary {
        background-color: rgba(198, 61, 28, 0.5);
        border: unset;
        height: 104px;
        .van-button__text {
          font-size: 36px;
        }
      }
      &.active {
        .van-button--primary {
          background-color: #c63d1c;
        }
      }
    }
  }
}
@media (min-width: 451px) {
  .index-wrap {
    transform: scale(0.8) translateY(-12vh);
  }
}

@media (min-width: 1000px) {
  .index-wrap {
    transform: scale(0.3) translateY(-110vh);
  }
}
</style>
